<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>code highlight</title>
  <script type="text/javascript" src="../js/code_highlight.js"></script>
  <script type="text/javascript">
	function format() {
		var source = document.getElementById('source').value;
		var result = CodeHighlighter.highlight(source, 'java');
		document.getElementById('html').value = result;
		document.getElementById('html_div').innerHTML = result;
	}
  </script>
  <style type="text/css">
  .keywords {
    color: #7F0055;
    font-weight: bold;
  }
  .string {
	color: #0000FF;
  }
  .comment {
	color: #009000;
  }
  .annotation {
	color: #666666;
  }
  #html_div {
	margin: 10px;
	padding: 10px;
	border: 1px solid #ccc;
	font-family: 'Monaco', 'Courier', 'Courier New';
	font-size: 12px;
  }
  </style>
 </head>
 <body>
  <textarea id="source" rows="20" cols="100"></textarea>
  <input type="button" value="格式化" id="btn_format" onclick="format();" />
  <textarea id="html" rows="20" cols="100"></textarea>
  <div id="html_div"></div>
 </body>
</html>
